<template>
	<view>
		<div class="xjsy">
			<div class="czmm">
				<ul>
					<li>
						<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a41.png"></image>
						<p>验证手机</p>
					</li>
					<li>
						<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a53.png"></image>
						<p><span>设置密码</span></p>
					</li>
					<li>
						<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a43.png"></image>
						<p><span>重置成功</span></p>
					</li>
				</ul>
			</div>
			<div class="mmsz">
				<ul>
					<li class="input-item">
						<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a48.png"></image>
						<input v-model="formData.mobile" maxlength="11" type="number" class="wby2"
							placeholder="请输入手机号码" />
					</li>
					<li class="input-item">
						<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a50.png"></image>
						<input v-model="formData.code" type="number" class="wby2" placeholder="请输入验证码" />
						<b class="yzm" @click="getCode"
							:class="{disabled:!mobileSuccess || getCodeBtnDisabled}">{{getCodeText}}</b>
					</li>
				</ul>
			</div>
			<button type="button" @click="submit" :class="{disabled:!mobileSuccess || !formData.code}"
				class="btn1">确定</button>
		</div>

	</view>
</template>

<script>
	const MOBILE_REG = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

	import user from "@/common/user.js"
	export default {
		data() {
			return {
				getCodeText: '发送验证码',
				getCodeBtnDisabled: false,
				formData: {
					mobile: '',
					code: '',
					password: '',
					confirmPassword: '',
				}
			}
		},
		computed: {
			mobileSuccess() {
				return MOBILE_REG.test(this.formData.mobile)
			},
		},
		onLoad(options) {
			if (options.title) {
				uni.setNavigationBarTitle({
					title: options.title
				})
			}
		},
		methods: {
			// 获取手机验证码js封装
			showTimer() {
				var t = 60; //设置等待时间
				var timer;
				this.getCodeBtnDisabled = true;
				this.getCodeText = t + '秒后重新发送';
				timer = setInterval(() => {
					if (t > 0) {
						t--;
						this.getCodeText = t + '秒后重新发送';
					} else {
						clearInterval(timer);
						this.getCodeText = '重新获取';
						this.getCodeBtnDisabled = false;
					}
				}, 1000);
			},
			verifyCode() {
				user.verifyCode(this.formData.mobile, this.formData.code, () => {
					
					uni.navigateTo({
						url: `./reset_pwd?mobile=${this.formData.mobile}&code=${this.formData.code}`
					})
				})
			},
			getCode() {
				if (this.getCodeBtnDisabled) return;

				if (!this.formData.mobile) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return;
				}


				if (!this.mobileSuccess) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					})
					return;
				}

				user.getVerifyCode(this.formData.mobile,2, code => {
					console.log(code);
					this.showTimer();
				})

			},
			submit() {
				this.verifyCode();
				
			}
		}
	}
</script>

<style>

</style>
